import React, { useState, useRef } from 'react'
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { Button, Overlay } from '../../components';
import BaseView from '../components/base-view'
export default (props: any) => {
  const [shows, setShows] = useState(false)
  const [haveContent, setHaveContent] = useState(false)
  return (
    <View style={{ backgroundColor: '#f2f2f2', flex: 1, width: '100%', height: '100%' }}>
      <BaseView title="基础用法">
        <Button style={styles.mrb} type="primary" onPress={() => setShows(!shows)}>基础用法</Button>
      </BaseView>
      <BaseView title="嵌入内容">
        <Button style={styles.mrb} onPress={() => setHaveContent(!haveContent)} type="primary">嵌入内容</Button>
      </BaseView>

      <Overlay show={shows} onChange={setShows}></Overlay>
      <Overlay show={haveContent} onChange={setHaveContent}>
        <View style={{ width: 200, height: 200, backgroundColor: "#fff" }}>
        </View>
      </Overlay>
    </View>
  )
}

const styles = StyleSheet.create({
  mr: {
    marginRight: 20,
  },
  mrb: {
    marginRight: 20,
  },
})